
const settingsBtn = document.getElementById('settings-btn');
const settingsContainer = document.getElementById('settings');
const settingsForm = document.getElementById('settings-form');
const difficultySelect = document.getElementById('difficulty');
const wordDisplay = document.getElementById('word');
const textInput = document.getElementById('text');
const scoreDisplay = document.getElementById('score');
const timeDisplay = document.getElementById('time');
const gameContainer = document.getElementById('game-container');
const endGameContainer = document.getElementById('end-game-container');
const finalScoreDisplay = document.getElementById('final-score');
const closeBtn = document.querySelector('.close-btn');
const startGameBtn = document.getElementById('start-game-btn');


const words = [
    'const', 'let', 'input', 'image', 'form', 'style', 'display', 
    'container', 'element', 'class', 'document', 'background', 
    'transition', 'transform', 'translate', 'border', 'radius', 
    'margin', 'padding', 'select', 'function', 'variable', 'array', 
    'object', 'string', 'number', 'boolean', 'loop', 'event', 'async'
];

let randomWord;
let score = 0;
let time = 10;
let difficulty = localStorage.getItem('difficulty') !== null ? 
    localStorage.getItem('difficulty') : 'medium';
let timeInterval;
let isGameRunning = false;


function initGame() {
    
    difficultySelect.value = difficulty;
}


function getRandomWord() {
    return words[Math.floor(Math.random() * words.length)];
}


function addWordToDOM() {
    randomWord = getRandomWord();
    wordDisplay.innerHTML = randomWord;
    
    
    wordDisplay.style.animation = 'none';
    void wordDisplay.offsetWidth; 
    wordDisplay.style.animation = 'fadeIn 0.5s ease';
}


function updateScore() {
    score++;
    scoreDisplay.innerHTML = score;
    
    
    scoreDisplay.style.transform = 'scale(1.2)';
    setTimeout(() => {
        scoreDisplay.style.transform = 'scale(1)';
    }, 300);
}


function updateTime() {
    time--;
    timeDisplay.innerHTML = time;
    
    
    if (time <= 5) {
        timeDisplay.style.color = 'var(--danger-color)';
    } else if (time <= 10) {
        timeDisplay.style.color = 'var(--warning-color)';
    } else {
        timeDisplay.style.color = 'var(--primary-color)';
    }
    
    
    if (time === 0) {
        clearInterval(timeInterval);
        gameOver();
    }
}

function gameOver() {
    isGameRunning = false;
    textInput.disabled = true;
    finalScoreDisplay.innerHTML = score;
    endGameContainer.classList.add('show');
    
 
}


function startGame() {
    if (isGameRunning) return;
    
    isGameRunning = true;
    score = 0;
    time = 10;
    scoreDisplay.innerHTML = score;
    timeDisplay.innerHTML = time;
    timeDisplay.style.color = 'var(--primary-color)';
    textInput.disabled = false;
    
    
    addWordToDOM();
    
    
    textInput.focus();
    
   
    clearInterval(timeInterval);
    timeInterval = setInterval(updateTime, 1000);
}


textInput.addEventListener('input', (e) => {
    if (!isGameRunning) return;
    
    const typedText = e.target.value;
    
    if (typedText === randomWord) {
        addWordToDOM();
        updateScore();
        e.target.value = '';
        
       
        switch(difficulty) {
            case 'hard':
                time += 2;
                break;
            case 'medium':
                time += 3;
                break;
            case 'easy':
                time += 5;
                break;
        }
        
        
        timeDisplay.innerHTML = time;
        
        
        wordDisplay.style.color = 'var(--success-color)';
        setTimeout(() => {
            wordDisplay.style.color = 'var(--dark-color)';
        }, 300);
        
      
    }
});


settingsBtn.addEventListener('click', () => {
    settingsContainer.classList.toggle('show');
});


closeBtn.addEventListener('click', () => {
    settingsContainer.classList.remove('show');
});


difficultySelect.addEventListener('change', (e) => {
    difficulty = e.target.value;
    localStorage.setItem('difficulty', difficulty);
    
   
    const savedMsg = document.createElement('div');
    savedMsg.textContent = '设置已保存!';
    savedMsg.style.position = 'fixed';
    savedMsg.style.bottom = '20px';
    savedMsg.style.right = '20px';
    savedMsg.style.background = 'var(--success-color)';
    savedMsg.style.color = 'white';
    savedMsg.style.padding = '10px 20px';
    savedMsg.style.borderRadius = '5px';
    savedMsg.style.boxShadow = '0 3px 10px rgba(0,0,0,0.2)';
    savedMsg.style.zIndex = '1000';
    document.body.appendChild(savedMsg);
    
    setTimeout(() => {
        savedMsg.style.opacity = '0';
        setTimeout(() => {
            document.body.removeChild(savedMsg);
        }, 500);
    }, 2000);
});


startGameBtn.addEventListener('click', startGame);


initGame();


document.addEventListener('keydown', (e) => {
    
    if (e.key === 'Escape') {
        settingsContainer.classList.remove('show');
    }
    
    
    if (e.key === ' ' && endGameContainer.classList.contains('show')) {
        window.location.reload();
    }
});


const style = document.createElement('style');
style.textContent = `
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(-20px); }
        to { opacity: 1; transform: translateY(0); }
    }
`;
document.head.appendChild(style);